<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<th:block th:include="common/head :: head('修改密码')"/>
<style>
    .index-header-menus, .index-header-gray, .index-header-search {
        display: none;
    }

    .index-header-main__back {
        display: block;
    }

    .login-block {
        min-height: 800px;
        width: 1080px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding-top: 40px;
    }

    .login-block-logo {
        width: 380px;
        margin-right: 100px;
    }
    .login-block-logo img {
        width: 100%;
    }

    .login-wrap {
        width: 400px;
        border-radius: 15px;
        background: #FFF;
    }


    .login-wrap-head {
        display: flex;
    }

    .login-wrap-head-item {
        flex: 1;
        height: 58px;
        line-height: 58px;
        font-weight: 700;
        font-style: normal;
        font-size: 22px;
        text-align: center;
        cursor: pointer;
        border-bottom: 1px solid #797979;
    }

    .login-wrap-head-item + .login-wrap-head-item {
        border-left: 1px solid #797979;
    }

    .is-active {
        border-bottom: none;
    }

    .login-wrap-content {
        padding: 30px;
    }

    .login-wrap-bottom {
        display: flex;
        justify-content: space-between;
        padding: 0 30px 20px;
    }

    .form-control {
        height: 40px;
    }

    .btn-success {
        height: 40px;
        font-size: 18px;
        margin-top: 30px;
        background-color: var(--color);
        border-color: var(--color);
    }

    label.error {
        top: 12px;
    }

    .code-btn {
        width: 100%;
        color: #333333;
        font-size: 13px;
        background-color: #ffad6b;
        display: block;
        height: 30px;
        text-align: center;
        line-height: 30px;
        margin-top: 5px;
        border-radius: 20px;
        cursor: pointer;
    }
</style>
<body>
<th:block th:include="common/head :: header('/')"/>

<div class="login-block">
    <div class="login-block-logo">
        <img src="/img/login.png" />
    </div>
    <div class="login-wrap">
        <div class="login-wrap-head">
            <div class="login-wrap-head-item is-active" refer="person">修改密码</div>
        </div>
        <div class="login-wrap-content" id="loginWrap1">
            <form id="loginForm1">
                <div class="row m-t">
                    <div class="col-xs-12">
                        <input type="text" name="userName" class="form-control uname" autocomplete="off"
                               placeholder="手机号" value=""/>
                    </div>
                </div>
                <div class="row m-t" >
                    <div class="col-xs-6">
                        <input type="text" name="validateCode" class="form-control code" autocomplete="off" placeholder="验证码" maxlength="5" />
                    </div>
                    <div class="col-xs-6">
                        <a href="javascript:void(0);" title="点击更换验证码">
                            <img th:src="@{/captcha/captchaImage?type=math}" class="imgcode" style="height: 40px;"/>
                        </a>
                    </div>
                </div>
                <div class="row m-t">
                    <div class="col-xs-6">
                        <input type="text" name="verifyCode" class="form-control uname" autocomplete="off" placeholder="短信验证码"
                               value=""/>
                    </div>
                    <div class="col-xs-6">
                        <div class="code-btn" id="codeBtn">获取短信验证码</div>
                    </div>
                </div>
                <div class="row m-t">
                    <div class="col-xs-12">
                        <input type="password" name="password" class="form-control uname" autocomplete="off" placeholder="请输入新密码" value=""/>
                    </div>
                </div>
                <div class="row m-t">
                    <div class="col-xs-12">
                        <input type="password" name="confirmPassword" class="form-control uname" autocomplete="off" placeholder="请再次输入新密码" value=""/>
                    </div>
                </div>
                <button class="btn btn-success btn-block" id="btnSubmit1" data-loading="正在操作，请稍候...">修改密码</button>
            </form>
        </div>
    </div>
</div>

<th:block th:include="common/head :: footer"/>
<th:block th:include="include :: footer"/>
<script th:src="@{/js/me/jq.form.serialize.js}"></script>

</body>
<script>
    var vform = $("#loginForm1").validate({
        rules: {
            userName: {
                required: true,
                mobile: true
            },
            verifyCode: "required",
            password: 'required',
            confirmPassword: {
                required: true,
                equalTo: "[name='password']"
            },
            creditCode: 'required',
            companyName: 'required'
        },
        messages: {
            userName: {
                required: "请输入手机号",
                mobile: "请输入正确的手机号"
            },
            verifyCode: "请输入短信验证码",

            password: '请输入新密码',
            confirmPassword: {
                required: "请再次输入新密码",
                equalTo: "两次输入密码不一致"
            },
            creditCode: '请输入企业信用代码',
            companyName: '请输入企业名称'
        },
        submitHandler: function () {
            doChangePassword()
        }
    });


    $(function () {
        $('.imgcode').click(function () {
            var url = ctx + "captcha/captchaImage?type=math&s=" + Math.random();
            $(".imgcode").attr("src", url);
        });

        $('#codeBtn').click(function() {
            if($(this).hasClass('loading')) {
                return false;
            }
            const validateCode = $('#loginForm1 input[name="validateCode"]').val();
            const username = $('#loginForm1 input[name="userName"]').val();
            if($.common.trim(validateCode) == '') {
                $.modal.msgError('请输入图形验证码')
                return
            }
            if($.common.trim(username) == '') {
                $.modal.msgError('请输入手机号')
                return
            }
            if(!validatePhone(username)) {
                $.modal.msgError('请输入正确手机号')
                return
            }

            $.ajax({
                type: 'post',
                url: ctx + 'phoneCode',
                data: {
                    validateCode: validateCode,
                    username: username,
                    type: 'register'
                },
                dataType: 'json',
                success: function(res) {
                    if(res.code === 0) {
                        $.modal.msgSuccess('验证码发送成功!')
                        setBtnTimer('codeBtn', '获取短信验证码')
                    } else {
                        $('#loginForm2 .imgCode').click()
                        $.modal.msg(res.msg)
                    }
                }
            })
        })
    })

    function setBtnTimer(id, text) {
        const el = $('#' + id)
        el.addClass('loading')
        let max = 60

        const timer = setInterval(() => {
            if(max > 0) {
                el.html(max + 's')
                max--
            } else {
                clearInterval(timer)
                el.removeClass('loading')
                el.html(text)
            }

        }, 1000)
    }


    function doChangePassword() {
        const data = $("#loginForm1").serializeObject()
        console.info('data:', data)

        $.modal.loading($("#btnSubmit1").data("loading"));

        $.ajax({
            url: ctx + "changePassword",
            type: "POST",
            data: data,
            dataType: "json",
            success: function(r) {
                $.modal.closeLoading();
                if (r.code == web_status.SUCCESS) {
                    $.modal.msgSuccess('密码修改成功！')
                    setTimeout(function () {
                        window.location.href = document.referrer
                    }, 500)
                } else {
                    $('#loginForm1 .imgcode').click();
                    $("#loginForm1 .code").val("");
                    $.modal.msg(r.msg);
                }
            }
        })

        $.modal.closeLoading();
    }

    function validatePhone(phone) {
        return /^1[3456789]\d{9}$/.test(phone);
    }

    function validateEmail(email) {
        return /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email);
    }

    $.validator.addMethod('mobile', function(value, element) {
        return this.optional(element) || validatePhone(value);
    })

    $.validator.addMethod('email', function(value, element) {
        return this.optional(element) || validateEmail(value);
    })

</script>
</html>